<template>
  <div class="remen">
    <van-tag plain type="primary">热门推荐</van-tag>
    <van-row>
      <van-col
        span="8"
        v-for="(item, index) in remenList"
        :key="index"
        @click="$router.push({ path: '/gendanXiang', query: { id: item.id } })"
      >
        <van-image width="92px" height="92px" fit="contain" :src="item.picUrl"
          ><span class="sp">{{ item.name }}</span></van-image
        >
      </van-col>
    </van-row>
    <div class="box">
      <van-tag plain type="primary">每日推荐</van-tag>
      <van-row>
        <van-col
          span="8"
          v-for="(item, index) in newSong"
          :key="index"
          @click="
            $router.push({
              path: '/gendanXiang',
              query: { id: item.id }
            })
          "
        >
          <van-image
            width="92px"
            height="92px"
            fit="contain"
            :src="item.coverImgUrl"
            ><span class="sp">{{ item.name }}</span></van-image
          >
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script scoped>
import { likemusic, eachSong } from '../home'
export default {
  data () {
    return {
      remenList: {},
      newSong: {} //每日新音乐
    }
  },
  async created () {
    let res = await likemusic()
    console.log(res)
    this.remenList = res.data.result

    // 每日推荐
    let msg = await eachSong()
    console.log(msg)
    this.newSong = msg.data.playlists
  }
}
</script>

<style>
.remen {
  margin-left: 12px;
}
.remen .sp {
  height: 34px;
  width: 92px;
  font-size: 12px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.box {
  height: 650px;
}
</style>
